<template>
    <div class='larger'>
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item,index) in newImgList" :key="index">
                <img :src="item">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination">{{imgIndex}} / {{newImgList.length}}</div>
        </swiper>
    </div>
</template>

<script>
export default {
    data() {
        const that = this;
        return {
            imgIndex: 0,
            swiperOption: {
                speed: 1000,
                slidesPerView: 'auto',
                centeredSlides: true,
                on: {
                    slideChangeTransitionStart: function() {
                        that.imgIndex = this.realIndex + 1;
                    }
                }
            },
        }
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        newImgList: {
            type: Array,
            default: []
        }
    },
    computed:{
        swiper(){
            return this.$refs.mySwiper.swiper
        }
    },
    methods:{
        parentHandleclick(index){
            // console.log(index)
            this.imgIndex = index + 1;
            this.swiper.slideTo(index, 0, false)
        }
    }
}
</script>

<style lang="less" scoped>
.larger{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.85);
}
</style>
